<template>
  <div class="main-content">
    <div style="display: flex; grid-gap: 10px; align-items: flex-start;">
      <!--       中栏 -->
      <div style="flex: 1" class="card">
        <div style="display: flex; grid-gap:15px; padding: 15px 0; border-bottom: 1px solid #dddddd" v-for="item in postsList" :key="item.postId">
          <div style="flex: 1;"  @click="goDetail(item.postId)">
            <div style="font-size: 16px; font-weight: bold; margin-bottom:10px" >{{ item.title }}</div>
            <div class="post-excerpt" >{{extractTextAndTruncate(item.content)}}</div>
            <div style="flex: 1; margin-top:10px">
              <span style="color:#666;margin-right: 20px"> <i class="el-icon-user" style="font-size: 13px">{{ item.name }}</i></span>
              <span style="color:#666;"> <i class="el-icon-star-on" style="font-size: 13px;">{{  item.likes }}</i></span>
            </div>
          </div>
          <div :class="{'hide-image-box': !item.imageUrl}" style="width:100px">
            <img v-if="item.imageUrl" style="width: 100%; height:91px; border-radius: 5px;" :src="item.imageUrl" alt=""/>
          </div>
        </div>
        <div v-if="total===0" style="padding: 29px 0; text-align: center;font-size: 16px; color: #666">暂无数据</div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

  </div>
</template>

<script>
import {getPostsByUser} from "@/api/forum/posts";

export default {
  name:"postsList",
  created() {
    this.getList();
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,     // 当前页码
        pageSize: 10,   // 每页显示条数
        title: null,
        userId: null,
        name: null,
        content: null,
        createdAt: null,
        likes: null,
        comments: null,
        status: null,
        updatedAt: null,
        imageUrl: null,
        viewCount: null,
        categoryName: null
      },
      total: 0,         // 总数据量
      postsList: [],        // 数据列表
      loading:false,   //遮罩层
    };
  },

  methods: {
    /** 查询帖子列表 */
    getList() {
      this.loading = true;
      this.queryParams.userId= this.$route.params.userId; // 1
      getPostsByUser(this.queryParams).then((response) => {
        this.postsList = response.rows;
        this.total = response.total;
        this.$emit('updateTotal', this.total);
        this.loading = false;

      });
    },
    // 帖子详情页
    goDetail(id) {
      if (!id) {
        console.error("帖子ID不能为空");
        this.$message.warning("帖子ID不能为空");
        return;
      }

      // 检查是否已经在详情页面，并且是同一个帖子
      if (this.$route.name === "detail" && this.$route.params.id == id) {
        console.log("已经在当前帖子详情页，无需重复跳转");
        return;
      }

      // 使用catch捕获重复导航错误
      this.$router
        .push({
          name: "detail",
          params: {id: id.toString()},
        })
        .then(() => {
          console.log("跳转成功!");
        })
        .catch((err) => {
          // 如果是重复导航错误，则忽略
          if (err.name === "NavigationDuplicated") {
            console.log("重复导航被忽略");
            return;
          }
          // 其他错误则抛出
          console.error("路由跳转错误:", err);
          this.$message.error(`跳转失败: ${err.message}`);
        });
    },
    //   截取显示内容
    extractTextAndTruncate(html) {
      // 提取纯文本
      const div = document.createElement('div');
      div.innerHTML = html;
      // 返回纯文本内容，优先使用textContent，如果不存在则使用innerText
      let text = div.textContent || div.innerText || '';
      // 判断文本长度是否超过15，若超过则截取前15个字符并添加省略号
      return text.length > 15 ? text.slice(0, 30) + '......' : text;
    }
  },
};
</script>
<style scoped lang="css">
.single-line {
  overflow: hidden; /* 超出部分隐藏 */
  white-space: nowrap; /* 文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
/*页面具体样式*/
.main-content{
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}
div .card {
  width: 50%;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  padding: 15px;
}
.hide-image-box {
  display: none; /* 或者使用 visibility: hidden; 根据需求选择 */
}
</style>
